import React, { Component } from 'react'
import { View, ScrollView, SafeAreaView } from 'react-native'
import Carousel, { Pagination } from 'react-native-snap-carousel'
import SliderEntry from './components/SliderEntry'
import styles from './styles/index.style'

const SLIDER_1_FIRST_ITEM = 0

export default class example extends Component {
  constructor(props) {
    super(props)
    this.state = {
      sliderActiveSlide: 0,
    }
  }

  _renderItem = ({ item, index }) => {
    const { borderRadius, itemWidth, itemHeight, onPress } = this.props

    return (
      <SliderEntry
        onPress={onPress}
        data={item}
        even={(index + 1) % 2 === 0}
        itemWidth={itemWidth}
        itemHeight={itemHeight}
        borderRadius={borderRadius}
      />
    )
  }

  render() {
    const {
      sliderWidth,
      itemWidth,
      itemHeight,
      inactiveSlideScale,
      showPagination,
      loop = false,
      firstItem = SLIDER_1_FIRST_ITEM,
    } = this.props

    return (
      <SafeAreaView style={[styles.safeArea, { height: itemHeight }]}>
        <View>
          <ScrollView scrollEventThrottle={200} directionalLockEnabled>
            <View style={styles.sliderContainer}>
              <Carousel
                ref={c => {
                  this._sliderRef = c
                }}
                data={this.props.images}
                renderItem={this._renderItem}
                sliderWidth={sliderWidth}
                itemWidth={itemWidth}
                hasParallaxImages
                firstItem={firstItem}
                inactiveSlideScale={inactiveSlideScale || 1}
                inactiveSlideOpacity={0.7}
                containerCustomStyle={styles.slider}
                contentContainerCustomStyle={styles.sliderContentContainer}
                loop={loop}
                loopClonesPerSide={2}
                autoplay
                autoplayDelay={500}
                autoplayInterval={3000}
                onSnapToItem={index =>
                  this.setState({ sliderActiveSlide: index })
                }
              />

              {showPagination && (
                <Pagination
                  dotsLength={this.props.images.length}
                  activeDotIndex={this.state.sliderActiveSlide}
                  containerStyle={[styles.paginationContainer]}
                  dotColor='#04be02'
                  dotStyle={styles.paginationDot}
                  inactiveDotColor='#d0cdd1'
                  inactiveDotOpacity={0.4}
                  inactiveDotScale={1}
                  carouselRef={this._sliderRef}
                  tappableDots={!!this._sliderRef}
                  renderDots={activeIndex =>
                    this.props.images.map((image, i) => (
                      <View
                        key={i}
                        style={[
                          styles.renderDots,
                          { width: 8 * this.props.images.length },
                        ]}
                      >
                        <View
                          style={[
                            styles.dot,
                            { backgroundColor: i === activeIndex ? '#04be02' : '#d0cdd1' },
                          ]}
                        />
                      </View>
                    ))
                  }
                />
              )}
            </View>
          </ScrollView>
        </View>
      </SafeAreaView>
    )
  }
}
